<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加路线</title>

    <!--判断是否登陆-->
    <script type="text/javascript" src="../../vendor/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="../../js/config.js"></script>
    <script type="text/javascript" src="../../js/jquerySession.js"></script>
    <script type="text/javascript">
        if ($.session.get('token') == null) {
            alert("用户未登录！");
            window.location.href = "../../login.html"
        }
    </script>

</head>
<style type="text/css">
    .box {

        margin: 0px auto;
        width: 100%;

    }

    .box ul {
        margin: 0px auto;
        padding-left: 0px;
        width: 400px;
    }

    .box ul li {
        list-style-type: none;
        text-align: right;
    }

    .box ul li .route_selection {
        width: 256px;
        height: 32px;
        margin-right: 10px;
        margin-bottom: 5px;
    }

    .box ul li input {
        height: 24px;
        width: 250px;
    }

    .box ul li span, input {
        margin: 5px 10px;
    }
</style>
<body>
<div class="box">
    <form enctype="multipart/form-data" id="addRoute">
        <ul id="voteList">
            <li>
                <span>比赛名称</span>
                <select name="match" class="route_selection">

                </select>
            </li>
            <li><span>路线名称</span><input type="text" name="introduction" id="routeName"/></li>
            <li><span>路线类型</span><input type="text" name="type" id="routeType"/></li>
            <li><span>路线图片</span><input type="file" name="file" id="routeImage"/></li>
        </ul>
    </form>
</div>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.getJSON(baseUrl + "/matches", function (json) {
            var data = json.data;
            var matches = $(".route_selection");
            matches.empty();
            $.each(data, function (i, item) {
                matches.append("<option value='" + item.id + "'>" + item.name + "</option>")
            })
        });

        //图片文件大小控制
        $("#file").change(function () {
            var fileInput = $("#file")[0];
            var byteSize = fileInput.files[0].size;
            if (byteSize > 1024 * 1024) {
                alert("图片大小超过1M");
                $("#file").val("");
            }
        });

    })
</script>
</body>
</html>